<template>
	<div class="wrapper">
		<!-- header部分 -->
		<header>
			<div class="location-text"><Back></Back>修改昵称</div>
		</header>

		<!-- 修改昵称部分 -->
		<div class="nickname-section">
			<input type="text" v-model="newNickname" placeholder="输入新的昵称" />
			<button @click="updateNickname" :disabled="!newNickname">修改昵称</button>
		</div>

		<!-- 底部菜单部分 -->
		<Footer></Footer>
	</div>
</template>

<script>
// 导入共通组件
import Footer from '../components/Footer.vue';
import Back from '../components/Back.vue';
export default {
	name: 'Index',
	data() {
		return {
			newNickname: '',  // 用于存储用户输入的新昵称
			user: {},  // 假设此处已有用户信息
		};
	},
	created() {
		// 模拟从 sessionStorage 中获取用户信息（可以根据你的实际情况调整）
		this.user = this.$getSessionStorage('user');
	},
	components: {
		Footer,
		Back
	},
	methods: {
		updateNickname() {
			if (!this.newNickname) {
				alert('昵称不能为空！');
				return;
			}

			// 向后端发送请求，更新昵称
			let url = `UserController/updateNickname/${this.user.userId}/${this.newNickname}`;
			this.$axios.post(url)
				.then(response => {
					if (response.data.result==1) {
						alert('昵称修改成功！');
						this.user.nickname = this.newNickname;  // 更新用户对象中的昵称
						this.newNickname = '';  // 清空输入框
					} else {
						alert('昵称修改失败！');
					}
				})
				.catch(error => {
					console.error(error);
					alert('修改过程中出现错误，请重试');
				});
		}
	}
}
</script>

<style scoped>
/****************** 总容器 ******************/
.wrapper {
	width: 100%;
	height: 100%;
}

/****************** header ******************/
.wrapper header {
	width: 100%;
	height: 12vw;
	background-color: #0097FF;
	font-size: 4.8vw;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
}

/****************** 修改昵称部分 ******************/
.nickname-section {
	margin: 20px 30px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.nickname-section input[type="text"] {
	width: 80%;
	padding: 10px;
	font-size: 4vw;
	margin-bottom: 10px;
	border-radius: 5px;
	border: 1px solid #ddd;
}

.nickname-section button {
	padding: 10px 20px;
	background-color: #0097FF;
	color: #fff;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.nickname-section button:disabled {
	background-color: #ccc;
	cursor: not-allowed;
}
</style>
